<template>
	<view id="tabbar-3-container">
		
		  <view class="top">
			  <!-- 调用父组件的方法 -->
			  <!-- <i class="icon-fanhui1 iconfont back" @click="hideView"></i> -->
				  <p>{{songData.title || 'TEST'}}</p>
				  <p>{{songData.author || 'test'}}</p>

		  </view>
		  <view class="mid-container" @click="geci">
		  	<view class="cover-box"  v-if="geciFlag">
		  		<image :src="songData.image" mode="" :class="[playData.playState? '':'pause', 'play']"></image>
		  	</view>
			<view v-if="!geciFlag">
				<!-- <p v-for="item in lyric">{{item.lrc}}</p> -->
				<lyr-view :lyrics="lyric" :curTime="nowTime2" @move="move3" @click.stop="geci"></lyr-view>
			</view>
		  </view>
		  <view class="bottom-controll">
		  	<!-- 喜欢 下载等 -->
		  		<view class="like-download">
		  			<!-- <i class="iconfont icon-xihuan"></i>
		  			<i class="iconfont icon-xihuan"></i>
		  			<i class="iconfont icon-xihuan"></i>
		  			<i class="iconfont icon-pinlun"></i>
		  			<i class="iconfont icon-gengduo"></i> -->
		  		</view>
		  		<!-- 进度条 --> 
		  		<view class="progress" @click="move">
		  			<cmd-progress :percent="percent" stroke-color="#ccc" :show-info="false"></cmd-progress>
		  			<p class="left">{{nowTime2 | timeSort}}</p>
		  			<p class="right">{{allTime | timeSort}}</p>
		  			<p style="display: none;">{{nowTime}}</p>
		  		</view>
		  		<!-- 播放控制 -->
		  		<view class="play-controll">
		  			<!-- <i class="icon-xunhuan iconfont"></i> -->
		  			<i class="icon-shangyishou iconfont" @click="lastSong"></i>
		  			<view class="play-pause" @click="pulse">
		  				<i :class="['iconfont', playData.playState? 'icon-zanting1':'icon-bofang1']" ></i>
		  			</view>
		  			<i class="icon-xiayishou iconfont" @click="nextSong"></i>
		  			<!-- <i class="icon-caidan iconfont"></i> -->
		  			            
		  		</view>
		  	</view>
		 <!-- <view @click="play">play</view>
		  <view @click ="pause">pause</view>
		  <view @click="nextSong">nextSong</view>
		  <view @click="lastSong">lastSong</view> -->
		  <!-- <view>{{songData}}</view>
		  <view>{{playData}}</view> -->
	</view>
</template>

<script>
	import cmdProgress from '../../../components/cmd-progress/cmd-progress.vue';
	import lyrView from '../../../components/bing-lyric/bing-lyric.vue'
	export default {
		data(){
			return {
				nowTime2: 0,
				allTime: 0,
				percent: 0,
				progress:null,
				geciFlag: true,
				lyric:''
			}
		},
		computed:{
			playData(){
				// return this.$store.state.playState
				return this.$store.getters.playData
			},
			playMethod(){
				return this.$store.getters.playMethod
			},
			songData(){
				return this.$store.state.song
			},
			nowTime(){
				setInterval(()=>{
					this.nowTime2 = this.iac.currentTime
					this.allTime = this.iac.duration
					this.percent = this.nowTime2/this.allTime*100
				}, 100)
				return 0
			},
		},
		onLoad() {
			this.getLyric()
		},
		onShow() {
		// 	console.log('songData',this.songData);
		// 	console.log('playData',this.playData);
			console.log(this.playData)
		},
		components:{
			cmdProgress,
			lyrView
		},
		methods:{
			play(){
				this.$play();
			},
			pause(){
				this.$pause();
			},
			pulse(){
				if(this.playData.playState)return this.pause()
				this.play()
			},
			// 点击下一首,
			nextSong(){
				let nowListIndex = this.$store.getters.nextPlayData.nowListIndex;
				let nowSongIndex = this.$store.getters.nextPlayData.nowSongIndex;
				let nowList = this.$store.getters.listData[0].lists;
				nowSongIndex = nowSongIndex < nowList.length-1 ? nowSongIndex+1:0;
				uni.request({
					url: "http://119.3.174.206:3000/song/url?id=" + nowList[nowSongIndex].id,
					success: (res) => {
						console.log(res.data)
						if(!res.data.data[0].url)return console.log('这歌要钱')
						this.iac.src = res.data.data[0].url
						this.$store.commit('nowPlayChange', {playState:true})
						this.iac.play()
						// this.$store.commit('nextPlayShift')
					}
				})
				console.log('nowList',nowList[nowSongIndex])
				this.$store.commit('nowSongChange', {nowSongIndex: nowSongIndex, nowListIndex: nowListIndex})
			},
			lastSong(){
				let nowListIndex = this.$store.getters.nextPlayData.nowListIndex;
				let nowSongIndex = this.$store.getters.nextPlayData.nowSongIndex;
				let nowList = this.$store.getters.listData[0].lists;
				nowSongIndex = nowSongIndex > 0 ? nowSongIndex-1:nowList.length-1;
				uni.request({
					url: "http://119.3.174.206:3000/song/url?id=" + nowList[nowSongIndex].id,
					success: (res) => {
						console.log(res.data)
						if(!res.data.data[0].url)return console.log('这歌要钱')
						this.iac.src = res.data.data[0].url
						this.$store.commit('nowPlayChange', {playState:true})
						this.iac.play()
						// this.$store.commit('nextPlayShift')
					}
				})
				console.log('nowList',nowList[nowSongIndex])
				this.$store.commit('nowSongChange', {nowSongIndex: nowSongIndex, nowListIndex: nowListIndex})
			},
			move(e){
				// console.log(this.progressLeft,this.progressRight)
				this.progress = document.querySelector('.cmd-progress-inner').getBoundingClientRect()
				// console.log(this.progress.left,this.progress.right)
				this.nowTime2 = (e.detail.x - this.progress.left)/(this.progress.right - this.progress.left)*this.allTime
				this.percent = this.nowTime2/this.allTime*100
				this.iac.seek(this.nowTime2)
			},
			geci(){
				console.log(this.geciFlag)
				this.geciFlag = !this.geciFlag
			},
			move3(data){
				// console.log(this.nowTime2,data)
				if(Math.abs(data-this.nowTime2)<=5)return 
				this.nowTime2 = data
				this.iac.seek(this.nowTime2)
			},
			// 获取歌词
			getLyric(){
				uni.request({
					url: 'http://119.3.174.206:3000/lyric?id='+ this.$store.getters.songData.id,
					success: (res)=>{
						this.lyric = res.data.lrc.lyric.split(/\n/)
					}
				})
			}
		},
	}
</script>

<style lang="less">
	#tabbar-3-container {
		.top {
			margin-top: 50rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			p:nth-child(1) {
				text-align: center;
				font-size: 44rpx;
			}
			p:nth-child(2) {
				margin-top: 10rpx;
				text-align: center;
				
			}
		}
		.mid-container {
			overflow: hidden;
			position: relative;
			margin-top: 50rpx;
			height: 800rpx;
			width: 100%;
			// background-color: pink;
			.cover-box {
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -260rpx 0 0 -260rpx;
				height: 520rpx;
				width: 520rpx;
				border-radius: 50%;
				border: 3px solid #eee;
				// background-color: yellow;
				overflow: hidden;
				image {
					height: 100%;
					width: 100%;
				}
				
				.play {
					animation: xuanZhuan 20s linear infinite;
				}
				.pause {
					animation-play-state: paused;
				}
				
			}
		}
		.bottom-controll {
			
			position: absolute;
			bottom: 120rpx;
			width: 100%;
			.like-download {
				height: 60rpx;
			}
			.progress {
				position: relative;
				margin: 30rpx auto;
				width: 80%;
				font-size: 20rpx;
				.left {position: absolute; left: -57rpx; top: 6rpx}
				.right {position: absolute; right: -57rpx; top: 6rpx}
			}
			.play-controll {
				display: flex;
				margin: 0 auto;
				width: 60%;
				justify-content: space-between;
				font-size: 50rpx;
				align-items: center;
				.iconfont {
					font-size: 50rpx;
				}
				.play-pause {
					
					border: 1px solid #ccc;
					width: 100rpx;
					height: 100rpx;
					background-color: rgba(226, 226, 226, 0.3);
					opacity: .7;
					border-radius: 50%;
					text-align: center;
					line-height: 100rpx;
					i {
						margin-left: 5rpx;
						font-size: 46rpx;
					}
				}
			}
		}
	}
	@keyframes xuanZhuan {
	            0% {}
	
	
	            100% {
	              transform: rotate(360deg);
	            }
	        }
</style>